<!-- 结构 -->
<script setup lang="ts">
import { ref } from 'vue'

// 定义属性接收父组件传值
const props = withDefaults(
    defineProps<{
        car: string
        house?: string
        money: number
    }>(),
    {
        house: "岸芷汀兰"
    }
)

console.log(props.car);

// 提供自定义事件
const emit = defineEmits<{
    (e: 'change-money', money: number): void
    (e: 'change-car', car: string): void
}>()

const car1 = ref('子组件的车');
const logCar1 = () => {
    console.log(car1.value);
}
defineExpose({ car1, logCar1 })

</script>

<!-- JS逻辑 -->
<template>
    <div class="child-page">

        子组件
        <div>车：{{ car }}</div>
        <div>房屋：{{ house }}</div>

        <div>金钱：{{ money }}</div>
        <!-- 发射自定义事件给父组件 -->
        <button @click="emit('change-money', 20000)">搬砖</button>
        <button @click="emit('change-car', '布加迪')">换车</button>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.child-page {
    width: 300px;
    height: 200px;
    background-color: greenyellow;
}
</style>